<template>
  <PublicPage bgColor="#F5F5F5">
    <up-alert
      v-if="info.verifyLog && info.verifyLog.verifyStatus === 2"
      type="error"
      title="认证失败"
      center
      :description="info.verifyLog.verifyRemark"></up-alert>
    <up-alert
      v-else-if="info.verifyLog && info.verifyLog.verifyStatus !== 1"
      type="warning"
      title="资质审核中"
      center
      :description="'已等待' + awaitTime(info.updateTime as string).desc"></up-alert>
      
    <view class="p-3 pt-1 bg-white">
      <UserCard
        :avatar="info?.cimg1"
        avatarClass="w-16 h-16 rounded"
        :userName="info?.cname">
        <template #content>
          <view class="flex items-center pt-3 u-content-color">
            <i class="iconfont">&#xe613;</i>
            <text class="pl-1">{{ info?.address }}</text>
          </view>
        </template>
        <template v-if="info.verifyLog" #status>
          <u-tag
            :text="info.verifyLog.verifyStatus === 1 ? '已认证' : (info.verifyLog.verifyStatus === 2 ? '认证失败' : '认证中')"
            :type="info.verifyLog.verifyStatus === 1 ? 'primary' : (info.verifyLog.verifyStatus === 2 ? 'error' : 'warning')"
            size="mini"
            plain
            plainFill />
        </template>
      </UserCard>

      <view
        style="border-top: solid 1px #f5f5f5"
        class="flex items-center justify-center pt-3"
        @click="goEditOrganization">
        <image src="@/static/image/icon/icon_edit2.png" class="w-4 h-4" />
        <view class="pl-3">修改机构信息</view>
      </view>
    </view>

    <view class="p-3">
      <view class="pt-2">
        <text class="text-base font-bold">机构数据</text>
        <text class="pl-2 u-content-color">更新时间: {{ newTimes }}</text>
      </view>
      <view class="grid grid-cols-3 py-4 my-4 bg-white rounded-lg gap-x-3">
        <view class="text-center">
          <view class="pb-3 text-xl font-medium">
            {{ statisticalData.comExpertCount || 0 }}
          </view>
          <view>医生数量</view>
        </view>
        <view class="text-center">
          <view class="pb-3 text-xl font-medium">
            {{ statisticalData.comTCMOrderNum || 0 }}
          </view>
          <view>开单数量</view>
        </view>
        <view class="text-center">
          <view class="pb-3 text-xl font-medium">
            ￥{{ statisticalData.comTCMOrderAmount || 0 }}
          </view>
          <view>开单金额</view>
        </view>
      </view>
    </view>

    <view>
      <view class="bg-white">
        <u-tabs
          :list="list"
          :scrollable="false"
          :current="tabsCurrent"
          @change="tabsChange"></u-tabs>
      </view>
      <view class="py-3 bg-white" :class="{ hidden: tabsCurrent === 1 }">
        <view class="px-3">
          <view class="title">基本信息</view>
        </view>
        <OrganizationInfo
          v-if="tabsCurrent === 0 && info"
          ref="OrganizationInfo"
          disabled />
        <view class="px-3 mt-3">
          <view class="title">系统信息</view>
          <!-- <view class="flex justify-between py-3 borderBottom">
            <view class="flex-shrink-0 pr-5 u-content-color">创建人</view>
            <view>{{ info?.adminacc }}</view>
          </view> -->
          <view class="flex justify-between py-3 borderBottom">
            <view class="flex-shrink-0 pr-5 u-content-color">创建时间</view>
            <view>{{ info?.createTime }}</view>
          </view>
          <view class="flex justify-between py-3 borderBottom">
            <view class="flex-shrink-0 pr-5 u-content-color">最后修改时间</view>
            <view>{{ info?.updateTime }}</view>
          </view>
        </view>
      </view>
      <view :class="{ hidden: tabsCurrent === 0 }">
        <view class="bg-white">
          <view
            v-for="(item, index) in dataList"
            :key="item.id"
            class="mx-3"
            :class="{ borderBottom: index + 1 !== dataList.length }"
            @click="goExpertDetail(item.id)"
          >
            <UserCard
              :avatar="item.headimg"
              :userName="item.userName"
              :post-name="item.postName"
              :dept-name="item.deptname"
              :com="item.com">
              <template #content>
                <view v-if="item.createTime" class="pt-1 u-tips-color fz-12">
                  {{ item.createTime }} 注册
                </view>
              </template>
              <template #status>
                <!-- 0未认证 1成功 2已申请 3失败 -->
                <u-tag
                  v-if="item.apStatus === ExpertApStatusEnum.SUCCEED"
                  text="已认证"
                  type="primary"
                  size="mini"
                  plain
                  plainFill
                  icon="checkmark-circle-fill" />
                <u-tag
                  v-else-if="item.apStatus === ExpertApStatusEnum.ERROR"
                  text="认证失败"
                  type="error"
                  size="mini"
                  plain
                  plainFill />
                <u-tag
                  v-else
                  text="认证中"
                  type="success"
                  size="mini"
                  plain
                  plainFill />
              </template>
            </UserCard>
          </view>
        </view>
        <Empty
          v-if="loadStatus === 'nomore' && dataList.length === 0"
          :type="1" />
        <LoadMore v-else :status="loadStatus" />
      </view>
    </view>
  </PublicPage>
</template>

<script setup lang="ts">
import UserCard from '@/components/userCard.vue'
import dayjs from 'dayjs'
import {
  statistical,
  companyDetails,
  companyGetExpertList
} from '@/api/organization'
import { usePageList } from '@/hooks/usePageList'
import { ExpertItemTypes } from '@/types/expert'
import OrganizationInfo from './editOrganization.vue'
import { ExpertApStatusEnum } from '@/utils/enums'
import { OrganizationStatusEnum } from '@/utils/enums'
import Empty from '@/components/empty.vue'
import LoadMore from '@/components/loadMore.vue'
import { refreshOnLoad } from '@/hooks/refreshPage'
import { useExpertStore } from '@/stores/expert'
import { awaitTime } from '@/utils'

const searchData = reactive({
  id: ''
})
const statisticalData = reactive({
  comTCMOrderAmount: 0, // 开单金额
  comExpertCount: 0, // 医生数量
  comTCMOrderNum: 0 // 开单数量
})
const info = ref<any>()
const newTimes = ref<string>()
const getData = async () => {
  newTimes.value = dayjs().format('YYYY-MM-DD HH:mm')
  // 获取统计信息
  statistical(searchData.id).then((res) => {
    statisticalData.comTCMOrderAmount = res.data.comTCMOrderAmount
    statisticalData.comExpertCount = res.data.comExpertCount
    statisticalData.comTCMOrderNum = res.data.comTCMOrderNum
  })
  // 获取机构信息
  info.value = undefined
  const { data } = await companyDetails(searchData.id)
  info.value = data
}

// 获取机构下的医生列表
const {
  getList,
  search,
  list: dataList,
  status: loadStatus
} = usePageList<ExpertItemTypes>((params) =>
  companyGetExpertList(searchData.id, { ...params })
)

const list = ref([
  {
    name: '详细信息'
  },
  {
    name: '医生信息'
  }
])
const tabsCurrent = ref(0)
const tabsChange = (val: { index: number }) => {
  tabsCurrent.value = val.index
}

// 跳转去医生详情
const goExpertDetail = (id: number) => {
  uni.$u.route({
    type: 'navigateTo',
    url: '/pages/expert/expertDetail',
    params: { id }
  })
}

// 去修改机构信息
const goEditOrganization = () => {
  uni.$u.route({
    type: 'navigateTo',
    url: '/pages/organization/editOrganization',
    params: searchData
  })
}
const expertStore = useExpertStore()
const { setSelectedBusiness } = expertStore

onLoad((options) => {
  searchData.id = options?.id
  getData()
  getList()
})
onShow(() => {
  refreshOnLoad((options: any) => {
    searchData.id = options?.id
    getData()
  })

  if (unref(info)) {
    setSelectedBusiness({
      userId: unref(info).businessUserId,
      avatar: '',
      nickName: unref(info).businessUserName,
      dept: {
        deptName: unref(info).businessDeptName // 部门名称
      }
    })
  }
})

onUnload(() => {
  setSelectedBusiness() // 清除选择的跟进人
})

// 加载更多
onReachBottom(() => {
  getList()
})
</script>

<style lang="scss" scoped></style>
